<script setup>
import {ref} from 'vue'
// 响应式数据 当发生变化时,会自动更新 dom树
let count = ref(0)
let addCount = () => {
  count.value++
}
let incrCount = (event) => {
  count.value++
  // 通过事件对象阻止组件的默认行为
  event.preventDefault();

}
</script>

<template>
  <div>
    count的值是：{{ count }}
    <!-- 方法事件处理器 -->
    <button @click="addCount">方法事件处理器</button>
    <!--  内联事件处理器-->
    <button @click="count++">内联事件处理器</button>
    <!-- 只加一次 -->
    <button @click.once="count++">只加一次</button>
    <!--阻止事件的默认行为-->
    <a href="https://www.baidu.com" @click="incrCount">阻止组件的默认行为</a><!--默认行为是跳转百度，阻止后不跳转，但是count增加-->
    <!-- 事件修饰符 prevent 阻止组件的默认行为 -->
    <a href="http://www.xiaomi.com" target="_blank"
       @click.prevent="count++">prevent</a>
    <!-- 原生js方式阻止组件默认行为 (推荐) -->
    <a href="http://www.xiaomi.com" target="_blank"
       @click="incrCount($event)">prevent</a>
  </div>
</template>

<style scoped>

</style>